<template>
    <div>
        <textarea class='tinymce-textarea' id="tinymceEditer"></textarea>
        <Spin fix v-if="spinShow">
            <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
            <div>加载组件中...</div>
        </Spin>
    </div>
</template>

<script>
    import 'tinymce/plugins/imageupload/css/style.css'
    import 'jquery';
    import '../../libs/jquery.form';
    import tinymce from 'tinymce';
    import imageupload from 'tinymce/plugins/imageupload/plugin.min';
    export default {
        name: 'tinymceEditor',
        props: ['textContent'],
        data () {
            return {
                spinShow: true,
            }
        },
        methods: {
            init () {console.log(this.textContent);
                this.$nextTick(() => {
                    let vm = this;
                    tinymce.init({
                        selector: '#tinymceEditer',
                        branding: false,
                        elementpath: false,
                        height: 300,
                        language: 'zh_CN.GB2312',
                        menubar: false,
                        plugins: [
                            'imageupload advlist autolink lists link charmap print preview hr anchor pagebreak imagetools',
                            'searchreplace visualblocks visualchars code fullpage',
                            'insertdatetime nonbreaking save table contextmenu directionality',
                            'emoticons paste textcolor colorpicker textpattern imagetools codesample'
                        ],
                        toolbar: "undo redo | imageupload link | bold italic | alignleft aligncenter alignright alignjustify | newnote preview | insert | styleselect | forecolor backcolor bold italic |  bullist numlist outdent indent | emoticons codesample",
                        autosave_interval: '20s',
                        table_default_styles: {
                            width: '100%',
                            borderCollapse: 'collapse'
                        },
                        imageupload_url: 'admin/user/upload?path=editor',
                        imageupload_rel: 'src',
                        setup: function (editor) {
                            editor.on('init', function (e) {
                                vm.spinShow = false;
                                // if (localStorage.editorContent) {
                                //     tinymce.get('tinymceEditer').setContent(localStorage.editorContent);
                                    tinymce.get('tinymceEditer').setContent(vm.textContent);
                                    console.log(vm.textContent);
                                // }
                            });
                            editor.on('input change undo redo', function (e) {
                                // localStorage.editorContent = tinymce.get('tinymceEditer').getContent();
                                vm.$emit('getEditor', tinymce.get('tinymceEditer').getContent());
                            });
                        }
                    });
                });
            },
        },
        mounted () {
            this.init();
        },
        destroyed () {
            tinymce.get('tinymceEditer').destroy();
        }
    };
</script>